<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi"></script> 
<!-- comment  -->
  <script type='text/javascript'>

var auth_token = 'invalid';
function doClientLogin(email, passwd) {
  if(false) {
  var xhr = $.post("https://www.google.com/accounts/ClientLogin", 
    {accountType:"HOSTED_OR_GOOGLE"
    , Email: email
    , Passwd: passwd
    , service: "wise" 
    , source : "Bike7now Client App 1.0"
    },
    function(data) {
      console.log("data:" + data);
      auth_token = data.substring(data.indexOf("Auth=") + 5);
      console.log("auth_token:" + auth_token);
    }
  );
  } else {
  var response = $.ajax({
    type: "POST",
    cache : false,
    url: "https://www.google.com/accounts/ClientLogin",
    data : 
      {accountType:"HOSTED_OR_GOOGLE"
      , Email: email
      , Passwd: passwd
      , service: "wise" 
      , source : "Bike7now Client App 1.0"
      },
	beforeSend: function(xhr) {
		console.log("before send client login request");
	  },
    success: function(data) {
      console.log(data);
      auth_token = data.substring(data.indexOf("Auth=") + 5);
      console.log("auth_token:" + auth_token);
	  $("#status").text("Login Success.");
      },
    error: function(request, status, errorThrown) {
      console.log(request);
      console.log(status);
      console.log(errorThrown);
      }
    });
  }

}
var initAccess = function() {
  $("#status").text("Init API library done.");
  $("#login").click(function() {
    var email = $("#Email").val();
    var passwd = $("#Passwd").val();
    console.log("Email:"+ email);
    console.log("Passwd:"+ passwd);
    doClientLogin(email,passwd);
  });

  $("#login_form").submit(function() { return false;}); //so it won't submit
  $("#get_data").click(function() {
    //spreadsheet key
    var table_key = '0Ava5-tZ5ZxAKdEVJV3lfU1p5OV8zTDVmQktsNTVsRUE';
    var sheet = 1;
    var queryType = 'cells';
    var data = 
      {
        //Authorization: "GoogleLogin Auth="+auth_token
        Auth: auth_token
      };

	var feed_url = 
	  "http://spreadsheets.google.com/feeds/" + queryType + "/"
      + table_key + "/" + sheet + "/public/values?alt=json-in-script";
	
    $.getJSON(
      feed_url + "&callback=?", 
      cellEntries);
  });

  $("#get_ajax").click(function() {
    //spreadsheet key
    var table_key = '0Ava5-tZ5ZxAKdEVJV3lfU1p5OV8zTDVmQktsNTVsRUE';
    var sheet = 1;
    var queryType = 'cells';
    var data = 
      {
        //Authorization: "GoogleLogin Auth="+auth_token
        Auth: auth_token
      };

	var feed_url = 
	  "http://spreadsheets.google.com/feeds/" + queryType + "/"
      + table_key + "/" + sheet + "/public/values?alt=json-in-script";
	
	$.ajax({
	  cache : false,
	  url: feed_url,
	  dataType: "jsonp",
	  jsonp: "cellEntries",
	  data: {callback : "cellEntries"},
	  beforeSend: function(xhr) {
		console.log("before send");
	  },
	  error: function(xhr) {
		console.log("fail to call json");
	  }
	});
  });

  $("#get_ajax_private").click(function() {
	removeOldResults();

    //spreadsheet key
    var table_key = '0Ava5-tZ5ZxAKdEVJV3lfU1p5OV8zTDVmQktsNTVsRUE';
    var sheet = 1;
    var queryType = 'cells';

	var feed_url = 
	  "http://spreadsheets.google.com/feeds/" + queryType + "/"
      + table_key + "/" + sheet + "/public/values?alt=json";
	
	$.ajax({
	  type: "get"
	  , dataType: "json"
	  , url: "http://www.google.com/calendar/feeds/developer-calendar@google.com/public/full?alt=json"
      , success: function(response) {
		console.log(response);
	  }
	  , error: function(xhr) {
		console.log("fail to call data api");
	  }
	});
  });

}

function removeOldResults() {
  var div = document.getElementById('data');
  if (div.firstChild) {
    div.removeChild(div.firstChild);
  }
}

function cellEntries(json) {
  console.log("do cellEntries");
  removeOldResults();

  var table = document.createElement('table');
  table.setAttribute('id', 'output');
  var tbody = document.createElement('tbody');
  var tr;

  for (var i=0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    if (entry.gs$cell.col == '1') {
      if (tr != null) {
        tbody.appendChild(tr);
      }
      tr = document.createElement('tr');
    }

    var td = document.createElement('td');
    td.appendChild(document.createTextNode(entry.content.$t));
    tr.appendChild(td);
  } 

  tbody.appendChild(tr);
  table.appendChild(tbody);
  document.getElementById('data').appendChild(table);
}

google.load('gdata', '1.x'); 
google.load("jquery", "1.3.2");
google.setOnLoadCallback(initAccess);

  </script>
</head>
<body>
  <form id='login_form' action='' method="POST">
  <fieldset>
  <p> Email: <input id='Email'>
  <p> Password: <input id='Passwd' type="password">
  </fieldset>
  <p> <button id='login'> Login </button>
  </form>
  <p> <button id='get_data'> Get Data via $.getJSON() </button>
  <p> <button id='get_ajax'> Get Data via $.ajax() </button>
  <p> <button id='get_ajax_private'> Get 'Private' Data via $.ajax() with clientLogin token</button>
  <div id="data"> No data load</div>

  <p>
  <pre id="status"> init....</pre>
</body>
</html>
